<template>
    <d2-container>
        <el-dialog
                title="订单详情"
                :visible.sync="dialogVisible"
                width="1000px"
                height='300px'
        >
<!--                 <el-table
                        :data="courseOrderOne" id="printMe">
                    <el-table-column
                            prop="student"
                            label="学生姓名"
                    >
                    </el-table-column>

                    <el-table-column label="订单详情">

                        <el-table-column
                                prop="name"
                                label="课程名称"
                                width="120">
                        </el-table-column>

                        <el-table-column
                                prop="school"
                                label="购买校区"
                                width="120">
                        </el-table-column>

                        <el-table-column
                                prop="payStatus"
                                label="支付状态"
                                width="120">
                        </el-table-column>

                        <el-table-column
                                prop="price"
                                label="支付金额"
                                width="120">
                        </el-table-column>

                        <el-table-column
                                prop="createdAt"
                                label="购买时间"
                                width="120">
                        </el-table-column>

                        <el-table-column
                                prop="agent"
                                label="经办人"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="memo"
                                label="备注"
                                width="120">
                        </el-table-column>

                    </el-table-column>
                </el-table> -->
<!--              <div id="printMe" style="width: 910.8px;height:258px;border:solid 1px black">
                <div style="padding-left:20px;padding-right: 20px;padding-top: 10px">
                    <div style="font-size:14px;font-weight: 5px"><span>校区:{{courseOrderOne.school}}</span></div>
                    <div style="font-size:14px;font-weight: 5px;margin-top:5px">学生:{{courseOrderOne.student}}</div>
                    <div  style="font-size:14px;font-weight: 5px;margin-top:5px">时间:{{courseOrderOne.createdAt}}</div>
                    <div style="font-size:14px;font-weight: 5px;margin-top:10px"><b>订单信息</b></div>
                    <div style='margin-top:5px;font-size:12px;margin-left: 20px'>
                        <div style="width: 200px;display: inline-block;">课程:{{courseOrderOne.course.name}}</div> <div style="margin-left:50px;display: inline-block;">班级:{{courseOrderOne.class}}</div>
                    </div>
                    <div style='margin-top:5px;font-size:12px;margin-left: 20px'>
                        <div style="width: 200px;display: inline-block;">购课方式:{{courseOrderOne.typex}}</div> <div style="margin-left:50px;display: inline-block;">购课数量:{{courseOrderOne.amount}}</div>
                    </div>
                    <div style='margin-top:5px;font-size:12px;margin-left: 20px'>
                        <div style="width: 200px;display: inline-block;">开始日期:{{courseOrderOne.expire}}</div> <div style="margin-left:50px;display: inline-block;"  v-if='courseOrderOne.type == 2'>有效日期:{{courseOrderOne.startDate}}</div>
                    </div>
                    <div style='margin-top:5px;font-size:12px;margin-left: 20px'>
                        <div style="width: 200px;display: inline-block;">价格:{{courseOrderOne.total}}元</div> <div style="margin-left:50px;display: inline-block;">折扣:{{courseOrderOne.discount}}元</div>
                    </div>
                    
                    <div style='margin-top:5px;font-size:12px;margin-left: 20px'><b>金额:{{courseOrderOne.price}}元</b></div>
                    <div  style="font-size:14px;font-weight: 5px;margin-top:5px;width: 100%;"><b>备注</b>:<span style="font-size:12px">{{courseOrderOne.memoOut}}</span></div>
                </div>
            </div> -->

            <div id="printMe" style="width: 910.8px;height:258px;border:solid 1px black;position: relative;">
                    <div>
                    <div style="font-size:24px;font-weight: 10px;text-align: center;border-bottom: solid 1px #cccccc;width: 100%;display: block">{{courseOrderOne.school}}收款单</div>
                    <div style="font-size:18px;font-weight: 5px;width: 33%;border-bottom: solid 1px #cccccc;display: inline-block;border-right:solid 1px #cccccc"><span>学生:{{courseOrderOne.student}}</span></div>
                     <div style="font-size:18px;font-weight: 5px;width: 33%;border-bottom: solid 1px #cccccc;display: inline-block;border-right:solid 1px #cccccc;"><span>班级：{{courseOrderOne.class}}</span></div>
                    <div style="font-size:18px;font-weight: 5px;width: 33%;border-bottom: solid 1px #cccccc;display: inline-block;"><span>日期:{{courseOrderOne.createdAt}}</span></div> 

                    <table style="width: 100%;border-collapse: collapse;display: block;font-size: 16px" >
                            <tr style="font-size: 18px;width: 100%;">
                                <th style="width: 36%;border-right:solid 1px black;border-bottom: solid 1px black;padding:0">项目</th>
                                <th style="width: 11%;border-right:solid 1px black;border-bottom: solid 1px black">数量</th>
                                <th style="width: 11%;border-right:solid 1px black;border-bottom: solid 1px black">单位</th>
                                <th style="width: 11%;border-right:solid 1px black;border-bottom: solid 1px black">单价(元)</th>
                                <th style="width: 11%;border-right:solid 1px black;border-bottom: solid 1px black">合计金额(元)</th>
                                <th style="width: 11%;border-right:solid 1px black;border-bottom: solid 1px black">优惠金额(元)</th>
                                <th style="width: 11%;border-right:solid 1px black;border-bottom: solid 1px black">实收金额(元)</th>
                            </tr>
                            <tr  style="margin-bottom: 3px;font-size: 12px">
                                <td style="text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;border-right:solid 1px black;border-bottom: solid 1px black">{{courseOrderOne.course.name}}</td>
                                <td style="text-align: center;border-right:solid 1px black;border-bottom: solid 1px black;">{{courseOrderOne.numberTotal}}</td>
                                <td style="text-align: center;border-right:solid 1px black;border-bottom: solid 1px black;">{{courseOrderOne.typex}}</td>
                                <td style="text-align: center;border-right:solid 1px black;border-bottom: solid 1px black;">{{courseOrderOne.unitPrice}}</td>
                                <td style="text-align: center;border-right:solid 1px black;border-bottom: solid 1px black;" >{{courseOrderOne.total}}</td>
                                <td style="text-align: center;border-right:solid 1px black;border-bottom: solid 1px black;" >{{courseOrderOne.discount}}</td>
                                <td style="text-align: center;border-right:solid 1px black;border-bottom: solid 1px black;" >{{courseOrderOne.price}}</td>
                            </tr>
                             <tr v-for='item in a123' style="margin-bottom: 3px;font-size: 12px">
                                <td style="text-align: center;border-right:solid 1px black;border-bottom: solid 1px black;color:white" >-</td>
                                <td style="text-align: center;border-right:solid 1px black;border-bottom: solid 1px black;color:white" >-</td>
                                <td style="text-align: center;border-right:solid 1px black;border-bottom: solid 1px black;color:white" >-</td>
                                <td style="text-align: center;border-right:solid 1px black;border-bottom: solid 1px black;color:white" >-</td>
                                <td style="text-align: center;border-right:solid 1px black;border-bottom: solid 1px black;color:white" >-</td>
                                <td style="text-align: center;border-right:solid 1px black;border-bottom: solid 1px black;color:white" >-</td>
                                <td style="text-align: center;border-right:solid 1px black;border-bottom: solid 1px black;color:white" >-</td>
                            </tr>
                            
                        </table>
                        <div  style="font-size:16px;font-weight: 5px;width: 100%;text-align: left;border-bottom: solid 1px black;">合计:{{courseOrderOne.price}}元</div>
                       

                        <div  style="font-size:16px;font-weight: 5px;width: 100%;text-align: left;border-bottom: solid 1px black;display: inline-block;">支付方式:{{courseOrderOne.payWayText}}</div>
                         <div  style="font-size:16px;font-weight: 5px;width: 100%;text-align: left;border-bottom: solid 1px black;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">备注:{{courseOrderOne.memo}}</div>

                         <div  style="font-size:16px;font-weight: 5px;width: 33%;text-align: left;display: inline-block;">收款单位(章):</div>
                         <div  style="font-size:16px;font-weight: 5px;width: 33%;text-align: left;display: inline-block;">经办人:{{courseOrderOne.agent}}</div>
                         <div  style="font-size:16px;font-weight: 5px;width: 33%;text-align: left;display: inline-block;">缴款人签字:</div>
                     </div>
            </div>


            <span slot="footer" class="dialog-footer">
                <el-button @click='printabc()'>打印</el-button>
                <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>

        <el-form :inline="true" :model="dataSearch" ref="dataSearch">

            <el-form-item label="学生姓名" prop="studentName">
                <el-input v-model="dataSearch.studentName" placeholder="请输入学生姓名"></el-input>
            </el-form-item>

            <el-form-item label="所在校区" prop="school" v-if='showSchool'>
                <el-select
                        v-model="dataSearch.school"
                        filterable
                        placeholder="可输入名称搜索">
                    <el-option
                            v-for="item in schoolList"
                            :key="item._id"
                            :label="item.name"
                            :value="item._id"
                    ></el-option>
                </el-select>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="formSubmit">
                    <d2-icon name="search"/>
                    查询
                </el-button>
            </el-form-item>

            <el-form-item>
                <el-button @click="resetForm('dataSearch')">
                    <d2-icon name="refresh"/>
                    重置
                </el-button>
            </el-form-item>

            <a href="#/main-order">
                <el-button type="primary" style="float:right" icon="el-icon-plus">新建课程订单</el-button>
            </a>
        </el-form>
        <el-table :data="dataList" border style="width: 100%">
            <el-table-column prop="student.name" label="学生姓名"></el-table-column>
            <el-table-column prop="name" label="课程"></el-table-column>
            <el-table-column prop="class.name" label="班级"></el-table-column>
            <el-table-column prop="school.name" label="学校"></el-table-column>
            <!-- <el-table-column prop="payByMoney" label="金额收费"></el-table-column> -->
            <!-- <el-table-column prop="payByTimes" label="时长收费"></el-table-column> -->
            <!-- <el-table-column prop="payWay" label="收取方式"></el-table-column> -->
            <el-table-column prop="totalAmount" label="实收（元）"></el-table-column>
            <el-table-column prop="memoIn" label="对内备注"></el-table-column>
            <el-table-column prop="agent.name" label="经办人"></el-table-column>
            <el-table-column prop="created" label="创建时间"></el-table-column>
            <el-table-column prop="statusText" label="状态"></el-table-column>

            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button v-if="scope.row.payStatus=='待支付'" @click="confirmPay(scope.row)" type="text"
                               size="small">确认付款
                    </el-button>
                    <el-button @click="getCourseOrderOne(scope.row)" type="text" size="small">打印</el-button>
                    <el-button @click="DeleteClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total,sizes,prev, pager, next,jumper"
                :page-size="pageSize"
                :current-page="currentPage"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handlerSizeChange"
                @next-click="handleNextPage"
                @prev-click="handlePrevClick"
        ></el-pagination>
    </d2-container>
</template>

<script>
    import request from "@/plugin/axios";
    import {mapState} from "vuex";
    import formatTime from '@/libs/util.formatTime'

    export default {
        data() {
            return {
                options: {
                    schoolList: []
                },
                dialogVisible: false,
                dataList: [],
                total: 0,
                pageSize: 20,
                currentPage: 1,
                class: [],
                dataSearch: {
                    studentName:undefined,
                    school:undefined,
                    limitSchool:undefined
                },
                showSchool :false,
                courseOrderOne: {
                    student:'',
                    school:'',
                    course:{},
                    staff:{}
                },
                a123 : [0,0]
            };
        },
        computed: {
            ...mapState('d2admin/user', ['info']),
        },
        methods: {

            printabc(div){
            var PW =  window.open('', '', 'left=0,top=0,width=600,height=848.6,toolbar=0,scrollbars=0,status=0');
            // 获取div中的html内容
            PW.document.write(document.getElementById('printMe').innerHTML);
            PW.document.close();
            PW.focus();
            PW.print();
            PW.close();

            return false;
        },
            getCourseOrderOne(scope) {

                let _id = scope._id
                this.dialogVisible = true;
                request({
                    url: "/courseOrder/getCourseOrderOne",
                    method: "post",
                    data: {_id}
                }).then(res => {
                    if (res.code == 200) {
                        console.log(res,'haha')
                        let result = {}
                        let response = res.data;
                        let value = response;
                        let temp = {}

                            // if (value.courseType && value.courseType.length > 0) {
                            //     temp.courseType = value.courseType.map(value => value.name).join(',');
                            // } else {
                            //     temp.courseType = ''
                            // }
                            temp.name = value.course.name;
                            temp.price = value.total - value.discount;
                            temp.total = value.total
                            temp.discount = value.discount
                            // if (value.agent && value.agent.length > 0) {
                                temp.agent = value.agent == undefined ? '无' : value.agent.name
                            // } else {
                                // temp.agent = ''
                            // }
                            temp.typex = '按课时'
                            temp.expire = '无'
                            // temp.amount = value.numberOfClasses 
                            temp.unitPrice = value.course.pricePerClass
                            if (temp.type == 1){
                                temp.typex = '按小时'
                                // temp.amount = value.numberOfHours
                                temp.unitPrice = value.course.pricePerHour
                            }
                            else if (temp.type == 2){
                                temp.typex = '按月'
                                // temp.amount = value.numberOfMonths 
                                temp.startDate = formatTime.formatDate(res.data.startDate)
                                temp.unitPrice = value.course.pricePerMonth
                            }


                            if (temp.valid == 1){
                                temp.expire = formatTime.formatDate(res.data.validDate)
                            }
                            temp.numberTotal = value.numberTotal
                            temp.course = value.course
                            temp.memo = res.data.memoOut
                            temp.class = res.data.class == null ? '暂无' : res.data.class.name
                            temp.school = res.data.school.name
                            temp.createdAt = formatTime.formatTime(res.data.createdAt)
                            temp.student = res.data.student.name
                            temp.payStatus = res.data.payStatus == 0 ? '待支付' : res.data.payStatus == 1 ? '已支付' : '已取消';
                            if (res.data.payWay == 0){
                                temp.payWayText = '现金'
                            }
                            else if (res.data.payWay == 1){
                                temp.payWayText = '银行卡'
                            }
                            else if (res.data.payWay == 2){
                                temp.payWayText = '支付宝'
                            }
                            else if (res.data.payWay == 3){
                                temp.payWayText = '微信'
                            }
                            if (res.data.payWay == 4){
                                temp.payWayText = '其他'
                            }
                            result = temp
                        this.courseOrderOne = result
                    }
                })
            },
            formSubmit() {
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                this.getDataList(this.dataSearch);
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.getDataList(this.dataSearch)
            },
            handleClick(e) {
                this.$router.push({path: '/course-order-detail?id=' + e._id})
            },

            DeleteClick(e){
                this.$confirm('删除不会改变已经发放提成，如有需要，请联系财务','确定要删除该订单吗？',{
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"

                }).then(()=>{
                    request({
                    url: "/courseOrder/deleteCourseOrder",
                    method: "post",
                    data: {id: e._id}
                }).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: "删除成功"
                        });
                        this.getDataList(this.dataSearch);
                    }
                });
                }).catch(()=>{

                })
            },

            handleCurrentChange(currentPage) {
                this.currentPage = currentPage
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                this.getDataList(this.dataSearch);
            },
            handlerSizeChange(pageSize) {
                this.pageSize = pageSize
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                this.getDataList(this.dataSearch);
            },
            handleNextPage() {
                this.currentPage = this.currentPage + 1
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                this.getDataList(this.dataSearch);
            },
            handlePrevClick() {
                this.currentPage = this.currentPage - 1
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                this.getDataList(this.dataSearch);
            },

            getDataList(data) {
                let datax = {}
                datax.limitSchool = this.dataSearch.school
                // this.dataSearch.limitSchool = this.info.school.map(value => value._id);
                // data.limitSchool = this.dataSearch.limitSchool;
                let index1 = this.rights.indexOf('root') != -1
                let index2 = this.rights.indexOf('授课老师') != -1
                let index4 = this.rights.indexOf('教务老师') != -1
                let index3 = this.rights.indexOf('教务中心') != -1
                let index5 = this.rights.indexOf('校长') != -1
                index1 = index1 || index5
                index2 = index2 || index4
                if ((!index1) && (!index3)){
                    if (index2){
                        // datax.teacher = this.staff
                        datax.teacher = this.staff == undefined ? 'unbind' : this.staff
                        // data.teacher = this.staff
                        delete datax.limitSchool
                    }
                }
                if (data.studentName){
                    datax.studentName = data.studentName
                }
                datax.pageSize = this.pageSize
                datax.page = this.currentPage
                request({
                    url: "/courseOrder/getCourseOrderList",
                    method: "post",
                    data: datax
                }).then(res => {
                    this.total = res.data.total;
                    this.currentPage = res.data.currentPage;
                    this.dataList = []
                    this.dataList = res.data.courseOrder
                    this.dataList.forEach((item, index) => {
                        this.dataList[index].name = item.course.name
                        if (this.dataList[index].type == 0){
                            this.dataList[index].typeText = '按课时' ;
                        }
                        if (this.dataList[index].type == 1){
                            this.dataList[index].typeText = '按小时' ;
                        }
                        if (this.dataList[index].type == 2){
                            this.dataList[index].typeText = '按月' ;
                        }
                        this.dataList[index].totalAmount = this.dataList[index].total - this.dataList[index].discount
                        if (this.dataList[index].class == null){
                            this.dataList[index].class= {name:'暂无'}
                        }
                        console.log()
                        this.dataList[index].statusText = this.dataList[index].status == 0 ? '未分配' : '已分成'
                        this.dataList[index].created = formatTime.formatTime(item.createdAt)
                    })


                })
            },
            formatDate(date) {
                date = new Date(date);
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                return [year, month, day].map(this.formatNumber).join("-");
            },
            formatNumber(n) {
                n = n.toString();
                return n[1] ? n : "0" + n;
            },
            confirmPay(e) {
                request({
                    url: "/courseOrder/updatePayStatus",
                    method: "post",
                    data: {courseOrder: e._id}
                }).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: "确认付款成功"
                        });
                        this.getDataList(this.dataSearch);
                    }
                });

            },
            getSchoolList() {

                let data = {};
                data.page = 1
                data.pageSize = 999999
                request({
                    url: "/school/getSchoolList",
                    method: "post",
                    data
                }).then(res => {
                    console.log('bbb',res.data.school)
                    this.schoolList = res.data.school;
                    // 返回数据
                });

            },
            load(){
                this.rights = this.info.rights.map(function(e){return e.name})
                this.staff = this.info.staff == undefined ? null : this.info.staff._id
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                
                this.dataSearch.school = this.info.school[0]._id
                this.getDataList(this.dataSearch);

                let index1 = this.rights.indexOf('root') != -1
                let index2 = this.rights.indexOf('授课老师') != -1
                let index4 = this.rights.indexOf('教务老师') != -1
                let index3 = this.rights.indexOf('教务中心') != -1
                let index5 = this.rights.indexOf('校长') != -1
                index1 = index1 || index5

                if (index1 && ((this.info.school[0].headquarter == 2) || (this.info.school[0].headquarter == 1))){
                    this.headquarter = true
                    this.showSchool = true
                    this.dataSearch.school = this.info.school[0]._id

                    this.getSchoolList()
                }
                if (this.$route.query.id != undefined) {
                    let temp = {}
                    temp._id = this.$route.query.id 
                    this.getCourseOrderOne(temp)
                }
            }
        },
        beforeRouteEnter(to,from,next){
            console.log(to.meta.refresh == 'a','tee',to.meta.refresh)
            if (to.meta.refresh == 'a'){
                to.meta.refresh = undefined
                next(v=>{
                v.load()
                })
            }
            else{
                next()
            }

        },
        created() {
            this.load()
        }
    };
</script>
